<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>33. 标签替换的禁止贪婪使用</title>
    </head>
    <body>
        <main>
            <span>houdunwang</span>
            <span>hdcms</span>
            <span>houdunren.com</span>
        </main>
    </body>
    <script>
        //span => h4 => 描红 =》 后盾人
        // const main = document.querySelector('main');
        // const reg = /<span>[\s\S]+<\/span>/gi;
        // main.innerHTML.replace(reg, (v) => {
        //     console.log(v)
        // })
        //这样操作后 会匹配到所有的标签在一个字符串中，所以需要使用禁止贪婪
        // <span>houdunwang</span>
        // <span>hdcms</span>
        // <span>houdunren.com</span>
        
        //使用禁止贪婪  ？ 这是就能匹配到 第一个span的结束标签
        const main = document.querySelector('main');
        const reg = /<span>([\s\S]+?)<\/span>/gi;
        main.innerHTML=main.innerHTML.replace(reg, (v,p1) => {
            console.log(v) //<span>houdunwang</span>
            console.log(p1) // houdunwang
            return `<h4 style="color:red;">后盾人-${p1}</h4>`;
        })
        
    </script>
</html>
